<template>
	<view>
		<intake-nav-bar title="编辑资料" dark :fixed="true" color="#000" />
		<form @submit="formSubmit">
			<view class='personal-data'>
				<view class='list'>
					<view class='item acea-row row-between-wrapper'>
						<view>昵称</view>
						<view class='input'><input type='nickname' name='nickname' :maxlength="10"
								:value='userInfo.nickname'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>手机号码</view>
						<view class='input acea-row row-between-wrapper'>
							<view class="acea-row row-middle">
								<input type='text' disabled='true' name='mobile' :value='userInfo.mobile' class='id' />
								<text class='iconfont icon-suozi'></text>
							</view>

						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>ID号</view>
						<view class='input acea-row row-between-wrapper'>
							<view class=""></view>
							<view class="">
								<text>{{ userInfo.id }}</text>
								<text class='iconfont icon-suozi'></text>
							</view>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper" v-if="userInfo.phone">
						<view>密码</view>
						<navigator url="/pages/users_purchasing/user_pwd_edit/index" hover-class="none" class="input">
							点击修改密码<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
					<view class="item acea-row row-between-wrapper" v-if="userInfo.phone">
						<view>更换手机号码</view>
						<navigator url="/pages/users_purchasing/user_phone/index?type=1" hover-class="none"
							class="input">
							点击更换手机号码<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>账号注销</view>
						<navigator url="/pages/users_purchasing/user_cancellation/index" hover-class="none"
							class="input">
							注销后无法恢复<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>用户协议</view>
						<navigator url="/pages/users_purchasing/privacy/index?type=4" hover-class="none" class="input">
							点击查看<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>隐私协议</view>
						<navigator url="/pages/users_purchasing/privacy/index?type=3" hover-class="none" class="input">
							点击查看<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
				</view>

				<button class='modifyBnt bg-color' formType="submit">保存修改</button>
				<!-- #ifdef H5 || APP-PLUS || MP -->
				<view class="logOut cartcolor acea-row row-center-wrapper" @click="outLogin">退出登录</view>
				<!-- #endif -->
			</view>
		</form>
		<canvas canvas-id="canvas" v-if="canvasStatus"
			:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px', position: 'absolute', left: '-100000px', top: '-100000px' }"></canvas>

	</view>
</template>

<script>
import {
	getUserInfo,
	userEdit,
	getLogout,
	mpBindingPhone
} from '@/api/user.js';
import {
	switchH5Login,
} from '@/api/api.js';
import {
	toLogin
} from '@/libs/login.js';
import {
	mapGetters
} from "vuex";
// import dayjs from "@/plugin/dayjs/dayjs.min.js";
// #ifdef MP
import Routine from '@/libs/routine';
// #endif
import Cache from '@/utils/Cache';
export default {
	components: {
	},
	mixins: [],
	data() {
		return {
			userInfo: {},
			loginType: 'h5', //app.globalData.loginType
			userIndex: 0,
			switchUserInfo: [],
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			canvasWidth: "",
			canvasHeight: "",
			canvasStatus: false,
			fileSizeString: '',
			version: '',
			array: [],
			setIndex: 0,
			mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false
		};
	},
	computed: mapGetters(['isLogin']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getUserInfo();
				}
			},
			deep: true
		}
	},
	onLoad() {
		if (this.isLogin) {
			this.getUserInfo();
			// #ifdef APP-PLUS
			this.formatSize()
			// 获取版本号
			plus.runtime.getProperty(plus.runtime.appid, (inf) => {
				this.version = inf.version;
			});
			// #endif
		} else {
			toLogin();
		}
	},
	methods: {
		getphonenumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				Routine.getCode()
					.then(code => {
						let data = {
							code,
							iv: e.detail.iv,
							encryptedData: e.detail.encryptedData,
						}
						mpBindingPhone(data).then(res => {
							this.getUserInfo()
							this.$utils.Tips({
								title: res.msg,
								icon: 'success'
							});
						}).catch(err => {
							return this.$utils.Tips({
								title: err
							});
						})
					})
					.catch(error => {
						uni.hideLoading();
					});
			}
		},
		bindPickerChange(e, item) {
			this.setIndex = e.detail.value
			Cache.set('locale', this.array[this.setIndex].value)
			getLangJson().then(res => {
				uni.setStorageSync('localeJson', res.data);
				this.$i18n.setLocaleMessage(this.array[this.setIndex].value, res.data[this.array[
					this.setIndex].value]);
				this.$nextTick(e => {
					this.$i18n.locale = this.array[this.setIndex].value;
				})
			})
		},

		updateApp() {
			this.$refs.appUpdate.update(); //调用子组件 检查更新
		},

		/**
		 * 小程序设置
		 */
		Setting: function () {
			uni.openSetting({
				success: function (res) { }
			});
		},
		switchAccounts: function (index) {
			let userInfo = this.switchUserInfo[index],
				that = this;
			that.userIndex = index;
			if (that.switchUserInfo.length <= 1) return true;
			if (userInfo === undefined) return that.$utils.Tips({
				title: '切换的账号不存在'
			});
			if (userInfo.user_type === 'h5') {
				uni.showLoading({
					title: '正在切换中'
				});
				switchH5Login().then(res => {
					uni.hideLoading();
					that.$store.commit("LOGIN", {
						'token': res.data.token,
						'time': this.$Cache.strTotime(res.data.expires_time) - this.$Cache.time()
					});
					that.getUserInfo();
				}).catch(err => {
					uni.hideLoading();
					return that.$utils.Tips({
						title: err
					});
				})
			} else {
				that.$store.commit("LOGOUT");
				uni.showLoading({
					title: '正在切换中'
				});
				toLogin();
			}
		},
		/**
		 * 退出登录
		 *
		 */
		outLogin: function () {
			let that = this;
			that.$store.commit("LOGOUT");
			uni.reLaunch({
				url: '/pages/login/index'
			})
			/*if (that.loginType == 'h5') {
				uni.showModal({
					title: '提示',
					content: '确认退出登录',
					success: function(res) {
						if (res.confirm) {
							getLogout()
								.then(res => {
									// uni.clearStorage()
									that.$store.commit("LOGOUT");

								})
								.catch(err => {});
						} else if (res.cancel) {}
					}
				});*/
			// }
		},
		/**
		 * 获取用户详情
		 */
		getUserInfo: function () {
			let that = this;
			getUserInfo().then(res => {
				that.$set(that, 'userInfo', res.data);
				that.userInfo = res.data
				let switchUserInfo = res.data.switchUserInfo || [];
				for (let i = 0; i < switchUserInfo.length; i++) {
					if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
					// 切割h5用户；user_type状态：h5、routine（小程序）、wechat（公众号）；注：只有h5未注册手机号时，h5才可和小程序或是公众号数据想通；
					//#ifdef H5
					if (
						!that.$wechat.isWeixin() &&
						switchUserInfo[i].user_type != "h5" &&
						switchUserInfo[i].phone === ""
					)
						switchUserInfo.splice(i, 1);
					//#endif
				}
				that.$set(that, "switchUserInfo", switchUserInfo);
			});
		},

		/**
		 * 提交修改
		 */
		formSubmit: function (e) {
			let that = this,
				value = e.detail.value,
				userInfo = that.switchUserInfo[that.userIndex];
			if (!value.nickname) return that.$utils.Tips({
				title: '请输入姓名'
			});
			// value.avatar = this.userInfo.avatar;
			userEdit(value).then(res => {
					return that.$utils.Tips({
						title: '保存成功',
					}, {
						tab: 3,
						url: 1
					});
			}).catch(msg => {
				return that.$utils.Tips({
					title: msg || '保存失败'
				}, {
					tab: 3,
					url: 1
				});
			});
		}
	}
}
</script>

<style scoped lang="scss">
.cartcolor {
	color: var(--view-theme);
	border: 1px solid var(--view-theme);
}

.personal-data {
	padding-bottom: 50rpx;
}

.personal-data .wrapper {
	margin: 10rpx 0;
	background-color: #fff;
	padding: 36rpx 30rpx 13rpx 30rpx;
}

.personal-data .wrapper .title {
	margin-bottom: 30rpx;
	font-size: 32rpx;
	color: #282828;
}

/deep/ .uni-input-input {
	font-size: 28rpx;
}

.personal-data .wrapper .wrapList .item {
	width: 690rpx;
	height: 160rpx;
	background-color: #f8f8f8;
	border-radius: 20rpx;
	margin-bottom: 22rpx;
	padding: 0 30rpx;
	position: relative;
	border: 2rpx solid #f8f8f8;
	box-sizing: border-box;
}

.personal-data .wrapper .wrapList .item.on {
	border-color: #e93323;
	border-radius: 20rpx;
	background-image: url("");
	background-size: 100% 100%;
	background-color: #fff9f9;
	background-repeat: no-repeat;
}

.personal-data .wrapper .wrapList .item .picTxt {
	width: 445rpx;
}

.personal-data .wrapper .wrapList .item .picTxt .pictrue {
	width: 96rpx;
	height: 96rpx;
	position: relative;
}

.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	position: absolute;
	bottom: 0;
	right: 0;
}

.personal-data .wrapper .wrapList .item .picTxt .text {
	width: 325rpx;
}

.personal-data .wrapper .wrapList .item .picTxt .text .name {
	width: 100%;
	font-size: 30rpx;
	color: #282828;
}

.personal-data .wrapper .wrapList .item .picTxt .text .phone {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.personal-data .wrapper .wrapList .item .bnt {
	font-size: 24rpx;
	background-color: #fff;
	border-radius: 27rpx;
	width: 140rpx;
	height: 54rpx;
	border: 2rpx solid #e93323;
}

.personal-data .wrapper .wrapList .item .currentBnt {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 26rpx;
	background-color: rgba(233, 51, 35, 0.1);
	width: 140rpx;
	height: 48rpx;
	border-radius: 0 20rpx 0 20rpx;
}

.personal-data .list {
	margin-top: 15rpx;
	background-color: #fff;
}

.personal-data .list .item {
	padding: 30rpx 30rpx 30rpx 0;
	border-bottom: 1rpx solid #f2f2f2;
	margin-left: 30rpx;
	font-size: 28rpx;
	color: #282828;
}

.personal-data .list .item .phone {
	width: 160rpx;
	height: 56rpx;
	font-size: 24rpx;
	color: #fff;
	line-height: 56rpx;
	border-radius: 32rpx
}

.personal-data .list .item .pictrue {
	width: 88rpx;
	height: 88rpx;
}

.personal-data .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.personal-data .list .item .input {
	//flex: 1;
	text-align: right;
	color: #868686;
	font-size: 28rpx;

	input {
		padding-right: 10rpx;
	}

	.icon-suozi {
		margin-left: 10rpx;
	}
}

.personal-data .list .item .input .id {
	// width: 180rpx;
}

.personal-data .list .item .input .iconfont {
	font-size: 24rpx;
}

.personal-data .modifyBnt {
	font-size: 32rpx;
	color: #fff;
	width: 690rpx;
	height: 90rpx;
	border-radius: 50rpx;
	text-align: center;
	line-height: 90rpx;
	margin: 76rpx auto 0 auto;
}

.personal-data .logOut {
	font-size: 32rpx;
	text-align: center;
	width: 690rpx;
	height: 90rpx;
	border-radius: 45rpx;
	margin: 30rpx auto 0 auto;
}

.avatar-box {
	width: 96rpx;
	height: 96rpx;

	image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
}
</style>
